<script setup lang="ts">
import { fetchStudyTreeAddApi, fetchStudyTreeApi, fetchStudyTreeCancelApi, fetchStudyTreeCollectListApi } from '@/api/study/studyTree';
import router from '@/router';
import { StarOutlined } from '@ant-design/icons-vue';
import { Typography, message } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'; // 引入 useRoute

const { Title, Paragraph } = Typography;

interface CourseDetail {
  id: string;
  name: string;
  description: string;
  imageUrl: string;
  createdAt: string;
  updatedAt: string;
  tags: string[]; // 假设有标签
}

const courseDetail = ref<CourseDetail | null>(null);
const isFavorited = ref(false);

const route = useRoute(); // 获取路由对象
const courseId = route.params.id as string; // 从路由参数中获取 id

onMounted(() => {
  if (courseId) {
    // 获取课程详情
    fetchStudyTreeApi({ id: courseId })
      .then((response) => {
        courseDetail.value = response.data;
      })
      .catch((error) => {
        console.error('Error fetching course details:', error);
      });

    // 获取收藏列表
    fetchStudyTreeCollectListApi()
      .then((response) => {
        const favorites = response.data;

        // 判断当前课程是否已被收藏
        const isAlreadyFavorited = favorites.some(
          (item: any) => item.id === courseId,
        );
        if (isAlreadyFavorited)
          isFavorited.value = true;
      })
      .catch((error) => {
        console.error('Error fetching favorite list:', error);
      });
  }
});

// 处理收藏和取消收藏的逻辑
const handleFavorite = () => {
  if (!courseId)
    return;

  if (isFavorited.value) {
    // 取消收藏
    fetchStudyTreeCancelApi({ treeId: courseId })
      .then(() => {
        isFavorited.value = false;
        message.success('已取消收藏');
      })
      .catch((error) => {
        console.error('Error removing from favorite:', error);
        message.error('网络错误，请稍后再试');
      });
  }
  else {
    // 添加收藏
    fetchStudyTreeAddApi({ treeId: courseId })
      .then(() => {
        isFavorited.value = true;
        message.success('已添加到收藏');
      })
      .catch((error) => {
        console.error('Error adding to favorite:', error);
        message.error('网络错误，请稍后再试');
      });
  }
};

const goBack = () => {
  router.replace('/user/learning_home');
};
</script>

<template>
  <div v-if="!courseDetail" class="loading">
    加载中...
  </div>
  <div v-else class="course-header">
    <div class="header-content">
      <a-typography-title
        :level="2"
        class="course-title"
      >
        {{ courseDetail.name }}
      </a-typography-title>
      <div class="tags">
        <!-- 动态渲染标签，如果有的话 -->
        <a-tag
          v-for="(tag, index) in courseDetail.tags"
          :key="index"
          class="course-tag"
        >
          {{ tag }}
        </a-tag>
      </div>
      <a-typography-paragraph class="course-description">
        {{ courseDetail.description }}
      </a-typography-paragraph>
    </div>
    <a-flex justify="end" style="gap: 16px;">
      <a-button
        type="primary"
        shape="round"
        size="large"
        @click="goBack"
      >
        返回技能树页
      </a-button>
      <a-button
        icon
        type="default"
        shape="round"
        size="large"
        :disabled="false"
        @click="handleFavorite"
      >
        <template #icon>
          <StarOutlined />
        </template>
        {{ isFavorited ? '已收藏' : '收藏' }}
      </a-button>
    </a-flex>
  </div>
</template>

<style scoped lang="scss">
.course-header {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* 移动端适配 */
  @media (max-width: 768px) {
    padding: 0.75rem;
  }
}

.loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #888;
}

.header-content {
  flex: 1;
}

.course-title {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  text-align: center;

  @media (max-width: 768px) {
    font-size: 1.25rem;
  }
}

.tags {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
}

.course-tag {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;

  @media (max-width: 768px) {
    font-size: 0.75rem;
  }
}

.course-description {
  font-size: 1rem;
  color: #6c757d;

  @media (max-width: 768px) {
    font-size: 0.875rem;
  }
}

.favorite-button {
  align-self: flex-end;
  margin-top: 1rem;

  @media (max-width: 768px) {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
}
</style>
